<script lang="ts" setup>
import { ref,reactive } from 'vue'
import { useRouter } from 'uni-mini-router'

const router = useRouter()
const ad = uni.getStorageSync("address");
const addressInfo = reactive({
	"details": ad?.addressDetail,
	"address": ad?.address
})
let latitude = ref(39.909)
let longitude = ref(116.39742)
let covers = ref([
	{
		latitude: 39.9085,
		longitude: 116.39747,
		// #ifdef APP-PLUS
		iconPath: '../../../static/app-plus/location@3x.png',
		// #endif
		// #ifndef APP-PLUS
		// iconPath: '../../../static/location.png',
		// #endif
	}, {
		latitude: 39.90,
		longitude: 116.39,
		// #ifdef APP-PLUS
		iconPath: '../../../static/app-plus/location@3x.png',
		// #endif
		// #ifndef APP-PLUS
		// iconPath: '../../../static/location.png',
		// #endif
	}
])
const affirm = () => {
	
	router.push({
		name: "inviteInterview",
		params: {
			"address":addressInfo.address,
			"addressDetail": addressInfo.details
		}
	})
}
</script>

<template>
	<u-navbar :placeholder="true" border="true" leftText="" title="" auto-back>
		<template #center>
			<view>
				面试地址
			</view>
		</template>
	</u-navbar>
	<view class="main">
		<view class="card">
			<text>面试地址</text>
			 <u-input
			    placeholder="请输入地址"
			    border="none"
			    v-model="addressInfo.address"
			  ></u-input>
		</view>
		<view class="card">
			<text>详细地址</text>
			<u--textarea v-model="addressInfo.details" placeholder="请输入详细地址" border="none"></u--textarea>
		</view>
		<map style="width: 100%; height: 200px;" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
		<view class="btn">
			<view class="affirm" @click="affirm">
				保存
			</view>
		</view>
	</view>
</template>

<style lang="scss">
.u-navbar{
	margin-bottom: 50rpx;
}
.card{
	display: flex;
	flex-direction: row;
	margin: 20rpx;
	text{
		width: 140rpx;
		margin: 0 10rpx;
		font-size: 30rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-family: PingFangSC-SNaNrpxibold;
	}
}

.btn{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom: 0;
	margin-bottom: 20rpx;
	.affirm{
		width: 600rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 48rpx;
		background-color: #d43951;
		color: #ffff;
	}
}

.u-textarea,
.u-input{
	background-color: rgb(247,247,247);
}

.u-input{
	height: 60rpx;
}
</style>
